<template>
  <div class="box">
    <!-- 导航 -->
    <van-nav-bar title="详情" class="top">
      <template #left>
        <van-icon name="arrow-left" size="20" color="white" @click="goback" />
      </template>
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          placement="bottom-end"
          theme="dark"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="ellipsis" size="30" color="white" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      @change="onChange"
    >
      <!-- 轮播图 -->
      <van-swipe-item v-for="(item, index) in imglist" :key="index">
        <img :src="item" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>
    <!-- 内容 -->
    <div class="neirong">
      <p class="red">￥{{ goodsdetail.originprice }}</p>
      <p class="main">
        <span class="van-multi-ellipsis--l2">{{ goodsdetail.desc }}</span>
        <span class="shou">
          <van-icon name="like-o" />
          收藏
        </span>
      </p>
    </div>
    <!-- 优惠 -->
    <van-cell is-link class="youhui"
      >优惠
      <span class="small">满100减50</span>
      <span class="small">满300减少200</span>
      <span class="small">满1000减900</span>
    </van-cell>
    <van-cell is-link class="youhui"
      >白条
      <span class="baitiao">最高6月免息</span>
    </van-cell>
    <!-- 分割线 -->
    <van-divider>猜你喜欢</van-divider>
    <!-- 列表 -->
    <Detaillist></Detaillist>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="gocart" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart()"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect1"
    />
    <div class="bo">
      <van-icon name="play-circle-o"  @click="govideo"/>
    </div>
  </div>
</template>

<script>
import Detaillist from "@/components/Detail/DetailList.vue";
import { Toast } from "vant";
import { getDetail, setcart } from "@/api/detail";
export default {
  components: {
    Detaillist,
  },
  data() {
    return {
      current: 0,
      imglist: [],
      goodsdetail: {},
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      activeNames: ["1"],
    };
  },
  created() {
    // console.log(this.$route.params.proid);
    getDetail(this.$route.params.proid).then((res) => {
      this.imglist = res.data.data.banners[0].split(",");
      this.goodsdetail = res.data.data;
      console.log(this.goodsdetail);
    });
  },
  methods: {
    goback() {
      this.$router.back();
    },
    gocart(){
      this.$router.push("/ShopingCart");
    },
    govideo(){
      this.$router.push("/Video");
    },
    onChange(index) {
      //   console.log(index);
      this.current = index;
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/");
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
    addCart() {
      // 判断是否登陆
      if (!localStorage.getItem("token")) {
        this.$router.push("/Login");
      } else {
        let proid = this.$route.params.proid;
        let userid = localStorage.getItem("userid");
        let num = 1;
        // console.log(proid,userid,num);
        setcart({ userid:userid, proid:proid, num:num }).then((res) => {
          console.log(res);
        });
        Toast("加入购物车成功");
      }
    },
  },
};
</script>

<style scoped>
.box {
  background-color: #f4f4f4;
}

.top {
  background-color: red;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.my-swipe .van-swipe-item {
  /* color: #fff; */
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}
.my-swipe {
  height: 18.75rem;
}
img {
  width: 100%;
  height: 100%;
}
.main {
  display: flex;
  padding: 0.625rem;
}
.main .shou {
  text-align: center;
  width: 2.25rem;
  border-left: 1px solid #e6e5e5;
}
.van-multi-ellipsis--l2 {
  font-size: 1.125rem;
  font-weight: 700;
  flex: 1;
}
.red {
  border-top: 1px solid #dddcdc;
  color: red;
  font-size: 1.875rem;
}
.youhui {
  border-radius: 0.9375rem;
  margin-top: 0.25rem;
}
.neirong {
  background-color: white;
}
.small {
  font-size: 0.75rem;
  border: 1px red solid;
  margin-left: 0.625rem;
  padding: 0.125rem;
}
.baitiao {
  margin-left: 1.25rem;
}
.bo{
  position:absolute;
  top: 18.125rem;
  left: .625rem;
  width: 3.125rem;
  height: 3.125rem;
  background-color: #f4f4f46a;
  border-radius: 50%;
  text-align: center;
  line-height: 3.125rem;
  font-size: 3.125rem;
}
</style>